<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, type TabsPaneContext } from 'element-plus'
import request from '@/utils/request'

// do not use same name with ref
const form = reactive({
  ID: '',
  name: '',
})

const loading = ref(false)  //用于控制按钮加载状态

const onSubmit = async () => {
  if(!form.ID || !form.name){
    console.error('类别编号和类别名称不能为空')
    return
  }
  try {
    loading.value = true // 提交前开始加载
    const response = await request.post('/category/add', {
      id: form.ID,
      name: form.name,
    })

    if (response.status === 200 && response.data.status === 'success') {
      console.log('添加类别成功', response.data)
    } 
    fetchCategorys() // 提交成功后刷新列表
      form.ID = '' // 清空表单
      form.name = '' // 清空表单
      ElMessage.success('添加类别成功')
  } catch (error) {
    console.error('Failed to add category:', error)
    ElMessage.error('服务器发生错误，请稍后重试')
  } finally {
    loading.value = false // 请求结束后关闭加载
  }
}

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

// 初始化为空数组而非对象

const Categorys = ref<any[]>([])

// 获取种类信息
const fetchCategorys = async () => {
  try {
    const response = await fetch('http://localhost:8080/Bookcategory/list',{
      credentials:"include",
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    }) // 向后端发送请求
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    const data = await response.json()
    Categorys.value = data // 将返回的书籍数据赋值给 Books
  } catch (error) {
    console.error('Error fetching categorys data:', error)
    Categorys.value = [] // 请求失败时，清空 Books 数据
  }
}
onMounted(() => {
  fetchCategorys() // 组件挂载时调用 fetchBooks 获取数据
})

</script>

<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        
      <el-tab-pane label="添加类别" name="first">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
             <el-form-item label="类别编号">
                 <el-input v-model="form.ID" placeholder="请输入类别编号" />
             </el-form-item>
            <el-form-item label="类别" >
                <el-input v-model="form.name" placeholder="请输入类别"/>
            </el-form-item>
            <el-form-item>
                <el-button 
                  type="primary" 
                  @click="onSubmit">
                提交
                </el-button>
            </el-form-item>
         </el-form>
      </el-tab-pane>

      <el-tab-pane label="显示全部类别" name="second">
        <el-table :data="Categorys" stripe style="width: 100%">
            <el-table-column prop="id" label="类别编号" width="180" />
            <el-table-column prop="name" label="类别名称" width="180" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
</template>
  
<style lang="scss" scoped>

</style>